<template>
  <el-drawer
    title="资产详情"
    :visible.sync="drawer"
    :direction="direction"
    size="75%"
    :modal="false"
    @open="handleAssetOpen"
    :before-close="handleClose">
    <el-tabs
      v-model="activeName"
      class="tabs"
      @tab-click="handleTabClick">
      <el-tab-pane label="基本信息" name="first">
        <basic-information></basic-information>
      </el-tab-pane>

      <el-tab-pane label="攻击入侵" name="second">
        <invasion></invasion>
      </el-tab-pane>

      <el-tab-pane label="告警" name="third">
        <warring :assetName="assetName"></warring>
      </el-tab-pane>

      <el-tab-pane label="登录事件" name="fourth">
        <login></login>
      </el-tab-pane>

      <el-tab-pane label="配置变更" name="fifth">
        <configure></configure>
      </el-tab-pane>
      <el-tab-pane label="关联事件" name="sixth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<script>
import basicInformation from './detailscomponents/basicInformation.vue'
import invasion from './detailscomponents/invasion.vue'
import warring from './detailscomponents/warring.vue'
import login from './detailscomponents/login.vue'
import configure from './detailscomponents/configure.vue'
export default {
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      activeName: 'first',
      assetName: ''
    }
  },
  components: {
    basicInformation,
    invasion,
    warring,
    login,
    configure
  },
  methods: {
    init(flag, assetName) {
      this.assetName = assetName
      this.drawer = flag
    },
    // 抽屉打开时请求对应数据
    handleAssetOpen() {
    },
    handleClose() {
      this.drawer = false
      this.activeName = 'first'
    },
    // 点击标签页是的事件
    handleTabClick(tab) {
    }
  }
}
</script>

<style scoped>
  .tabs {
    height: 100%;
    padding: 0 20px 20px 20px;
  }
</style>
